<template>
    <!-- 代办任务  日程表 -->
    <div class="main-container" style="background: #fff; padding: 8px 6px">
        <a-spin tip="Loading..." :spinning="showSpinner">
            <div class="search-box">
                <a-select v-model:value="queryCookbookIdList" mode="multiple" show-search
                    :placeholder="$t('tips.PleaseEnterTheRecipe')" showArrow style="width: 200px" allowClear
                    :filter-option="filterOption" @change="handleChange" @keyup.enter.native="searchCalendar()"
                    @clear="getToday()">
                    <a-select-option v-for="(item, index) in cookbookOptions" :key="item.name" :value="item.id"
                        :label="item.name">
                        {{ item.name }}
                    </a-select-option>
                    <template #suffixIcon>
                        <SearchOutlined class="ant-select-suffix custom-suffix-icon" />
                    </template>
                </a-select>
            </div>
            <div class="toolbar-boxer">
                <div class="toolbar-left">
                    <!-- 自定义下拉框 -->
                    <div class="custom-dropdown">
                        <a-select v-model:value="selectedView" @change="handleViewChange">
                            <a-select-option value="dayGridMonth">
                                <div class="icon-desc">
                                    <!-- 使用内联样式确保图标大小一致 -->
                                    <!-- <img class="icon-img" src="@/assets/svg/month.svg" alt="icon"
                                    style="width: 24px; height: 24px;"> -->
                                    <span class="date-desc">{{ $t('time.month') }}</span>
                                </div>
                            </a-select-option>
                            <a-select-option value="timeGridWeek">
                                <div class="icon-desc">
                                    <!-- <img class="icon-img" src="@/assets/svg/week.svg" alt="icon"
                                    style="width: 24px; height: 24px;"> -->
                                    <span class="date-desc">{{ $t('time.week') }}</span>
                                </div>
                            </a-select-option>
                            <a-select-option value="timeGridDay">
                                <div class="icon-desc">
                                    <!-- <img class="icon-img" src="@/assets/svg/day.svg" alt="icon"
                                    style="width: 24px; height: 24px;"> -->
                                    <span class="date-desc">{{ $t('time.day') }}</span>
                                </div>
                            </a-select-option>
                        </a-select>
                    </div>
                </div>
                <div class="toolbar-middle">
                    <LeftOutlined class="left-right-date-btn" style="margin-right: 10px;" @click="prevFn" />
                    <span style="color: #4ab44a;font-weight: 700;">{{ dateStr }}</span>
                    <RightOutlined class="left-right-date-btn" style="margin-left: 10px;" @click="nextFn" />
                    <span></span>
                </div>
                <div class="toolbar-right">
                    <a-button type="primary" ghost @click="toToday" style="margin-right: 10px;">{{ $t('time.today')
                    }}</a-button>
                    <a-button type="primary" ghost @click="openModel">{{ $t('calendar.addEvent') }}</a-button>
                </div>
            </div>

            <FullCalendar ref="fullCalendar" :options="calendarOptions" class="demo-app-calendar"
                style="padding: 10px 20px 20px 20px;">
                <template #eventContent="arg">
                    <!-- 显示标题 -->
                    <a-popover :title="dayjs(arg.event.start).format('YYYY年MM月DD日 HH时mm分')" placement="top">
                        <div slot="reference">
                            <span class="fc-event-title">
                                <span :class="{ 'dot': true }" style="margin-right: 2px;background-color: #4ab44a;">
                                </span>
                                {{ arg.timeText }} {{ arg.event.title }}
                            </span>
                        </div>
                        <template #content>
                            <div>
                                <div style="display: flex;justify-content: center;align-items: center;">
                                    <div>
                                        <a-tag color="#87d068" class="fc-event-title">{{ arg.event.title }}</a-tag>
                                    </div>
                                    <div>
                                        <a-tag color="green" class="fc-event-title">
                                            {{ arg.event.extendedProps.eatType == 1
                                                ? globalI18n.t('common.breakfast') :
                                                arg.event.extendedProps.eatType == 2
                                                    ? globalI18n.t('common.lunch') :
                                                    arg.event.extendedProps.eatType == 3
                                                        ? globalI18n.t('common.dinner') :
                                                        ''
                                            }}
                                        </a-tag>
                                    </div>
                                </div>
                                <div class="icon-popover">
                                    <EditOutlined class="icon-btn" @click="showEditEvent(arg.event)" />
                                    <DeleteOutlined class="icon-btn" @click="handleDeleteEvent(arg.event)" />
                                </div>
                            </div>
                        </template>
                    </a-popover>
                </template>
            </FullCalendar>

            <a-modal v-model:open="open1" :title="$t('calendar.addEvent')" @ok="handleAddEvent"
                :ok-text="$t('common.confirm')" :cancel-text="$t('common.cancel')">
                <div class="modelContainer" :style="{ '--modelTitleWidth': modelTitleWidth }">
                    <div class="modelItem">
                        <div class="modelTitle">{{ $t('calendar.cookbook') }}:</div>
                        <div class="modelContent">
                            <a-select v-model:value="addEventForm.cookbookIdList" mode="multiple" style="width: 100%"
                                :placeholder="$t('tips.PleaseChooseRecipe')" option-label-prop="children"
                                :filter-option="filterOption">
                                <a-select-option v-for="(item, index) in cookbookOptions" :key="item.name"
                                    :value="item.id" :label="item.name">
                                    {{ item.name }}
                                </a-select-option>
                            </a-select>
                        </div>
                    </div>
                    <div class="modelItem">
                        <div class="modelTitle">{{ $t('common.date') }}:</div>
                        <div class="modelContent">
                            <a-date-picker show-time :placeholder="$t('tips.PleaseSelectDate')" @change="onChange"
                                style="width: 100%" format="YYYY-MM-DD HH:mm:ss" />
                        </div>
                    </div>
                    <div class="modelItem">
                        <div class="modelTitle">{{ $t('common.category') }}:</div>
                        <div class="modelContent">
                            <a-radio-group v-model:value="addEventForm.eatType" style="width: 100%">
                                <a-radio-button value="1">{{ $t('common.breakfast') }}</a-radio-button>
                                <a-radio-button value="2">{{ $t('common.lunch') }}</a-radio-button>
                                <a-radio-button value="3">{{ $t('common.dinner') }}</a-radio-button>
                            </a-radio-group>
                        </div>
                    </div>
                </div>
            </a-modal>

            <!-- 编辑日程 -->
            <a-modal v-model:open="open2" title="编辑日程" @ok="handleEditEvent" @cancel="handleCancel(1)" :ok-text="$t('common.confirm')"
                :cancel-text="$t('common.cancel')">
                <div class="modelContainer">
                    <div class="modelItem">
                        <div class="modelTitle">{{ $t('calendar.cookbook') }}:</div>
                        <div class="modelContent">
                            <a-select v-model:value="editEventForm.cookbookId" style="width: 100%" :placeholder="$t('tips.PleaseChooseRecipe')"
                                option-label-prop="children" :filter-option="filterOption">
                                <a-select-option v-for="(item, index) in cookbookOptions" :key="item.name"
                                    :value="item.id" :label="item.name">
                                    {{ item.name }}
                                </a-select-option>
                            </a-select>
                        </div>
                    </div>
                    <div class="modelItem">
                        <div class="modelTitle">{{ $t('common.date') }}:</div>
                        <div class="modelContent">
                            <a-date-picker v-model:value="editEventForm.datetimeRef" show-time :placeholder="$t('tips.PleaseSelectDate')"
                                @change="onChange" style="width: 100%" format="YYYY-MM-DD HH:mm:ss" />
                        </div>
                    </div>
                    <div class="modelItem">
                        <div class="modelTitle">类别:</div>
                        <div class="modelContent">
                            <a-radio-group v-model:value="editEventForm.eatType" style="width: 100%">
                                <a-radio-button value="1">{{ $t('common.breakfast') }}</a-radio-button>
                                <a-radio-button value="2">{{ $t('common.lunch') }}</a-radio-button>
                                <a-radio-button value="3">{{ $t('common.dinner') }}</a-radio-button>
                            </a-radio-group>
                        </div>
                    </div>
                </div>
            </a-modal>
        </a-spin>
    </div>
</template>

<script setup>
import { computed, createVNode, onMounted, reactive, ref } from 'vue';

import { addEvent, deleteEvent, editEvent, findCookbookByRangeDate } from '@/api/calendarRecord.js';
import { pageCookbookList } from '@/api/cookbook';
import router from '@/router';
import { ExclamationCircleOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import zhCnLocale from '@fullcalendar/core/locales/zh-cn';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import listPlugin from '@fullcalendar/list';
import timeGridPlugin from '@fullcalendar/timegrid';
import FullCalendar from '@fullcalendar/vue3';
import { Modal, message } from 'ant-design-vue';
import dayjs from 'dayjs';
import { useI18n } from 'vue-i18n';

// i18n
const globalI18n = useI18n();
// 加载
const showSpinner = ref(false);

// ref="fullCalendar"
const fullCalendar = ref(null); // 模板中已有 ref="fullCalendar"
// 当前切换的日历视图
const selectedView = ref('dayGridMonth');
// 当前视图是否 不是 list 视图
const isNotListView = ref(true);

// 开始日期
const beginDate = ref(null);
// 截止日期
const endDate = ref(null);
const dateStr = ref('');
// 事件列表
const events = ref([]);
// 添加日程弹窗
const open1 = ref(false);
// 日程详情弹窗
const open2 = ref(false);
// 点击的日程信息
const clickEvent = reactive({
    id: '',
    title: '',
});
// 日历控件
const calendarOptions = reactive({
    plugins: [
        // 加载插件，V5采用插件模块方式加入
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin, // needed for dateClick
        listPlugin,
    ],
    // height: 1118, //日历高度
    // width: 600,
    customButtons: {
        myCustomButton: {
            text: '自定义按钮',
            click: function () {
                alert('点击了自定义按钮!');
            }
        }
    },
    // headerToolbar: {
    //     left: 'prev,next today myCustomButton',
    //     center: 'title',
    //     right: 'timeGridDay,timeGridWeek,dayGridMonth'
    // },
    headerToolbar: false, // 不显示头部
    titleFormat: { // will produce something like "Tuesday, September 18, 2018"
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    },
    handleWindowResize: true, //随浏览器窗口变化
    initialView: selectedView.value, // 初始化插件显示
    // initialDate: "2025--02-20", //初始化日期
    // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
    // editable: true, //是否可编辑
    // droppable: true,//可拖拽的
    timeZone: 'local',//采用时区
    selectable: true, // 是否允许用户单击或者拖拽日历中的天和时间隙
    // selectMirror: true,
    dayMaxEvents: true,
    weekends: true, // 是否显示一周七天
    // select: this.handleDateSelect,

    // 用户将鼠标悬停在事件上时触发
    eventMouseEnter: function (info) {
        console.log('handleEventMouseEnter', info);
        let event = info.event;

        clickEvent.title = event.title;
        clickEvent.id = event.id;
        clickEvent.date = event.date;
    },
    eventsSet: function () {
        console.log('eventsSet');
        const calendarApi = fullCalendar.value.getApi();
        showDate(calendarApi);
    },
    //日程点击事件
    eventClick: function (info) {
        let event = info.event;
        console.log('日程点击事件', event);
        router.push('/cookbook-manage/cookbook-detail?id=' + info.event.extendedProps.cookbookId)

        // router.push({
        //     path: '/cookbook-manage/cookbook-detail',
        //     query: {
        //         id: info.event.extendedProps.cookbookId,
        //     }
        // });
    },
    //点击日期数字触发
    navLinkDayClick: function (date, jsEvent) {
        console.log('点击日期数字');
        console.log(date);
    },
    //点击日历块事件(和下面的select同时触发)
    dateClick: function (info) {
        console.log('点击日历块事件');
        console.log(info);
        router
    },
    views: {
        list: {
            type: 'list',
            duration: { year: 1 },
        }
    },
    locale: zhCnLocale,
    nextDayThreshold: '01:00:00',
    events: events.value,
    // datesSet: this.handleDateSet,
    /* you can update a remote database when these fire:
    eventAdd:
    eventChange:
    eventRemove:
    */
});
// 添加日程参数
const addEventForm = reactive({
    cookbookIdList: [],
    eatType: "1",
    datetime: null,
});
// 编辑日程参数
const editEventForm = reactive({
    id: null,
    cookbookId: null,
    eatType: null,
    datetime: null,
    datetimeRef: null,
});
// 跳转到今天
const getToday = () => {
    fullCalendar.value.getApi().today();
    fetchData(fullCalendar.value.getApi());
}
// 菜谱列表
const cookbookOptions = ref([]);
// 查询的菜谱列表
const queryCookbookIdList = ref([]);

const onChange = (value, dateString) => {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
    addEventForm.datetime = dateString;
    editEventForm.datetime = dayjs(dateString).format('YYYY-MM-DD HH:mm:ss');
    console.log(editEventForm);
};
const showDate = (calendarApi) => {
    const begin = dayjs(calendarApi.view.activeStart).format('YYYY年MM月DD日');
    const end = dayjs(calendarApi.view.activeEnd).format('YYYY年MM月DD日');
    console.log(begin);
    console.log(end);
    beginDate.value = begin;
    endDate.value = end;
    if ('timeGridDay' === selectedView.value) {
        dateStr.value = begin;
    } else if ('timeGridWeek' === selectedView.value) {
        dateStr.value = begin + ' - ' + end;
    } else if ('dayGridMonth' === selectedView.value) {
        dateStr.value = begin + ' - ' + end;
    }
}

onMounted(() => {
    showSpinner.value = true;
    const calendarApi = fullCalendar.value.getApi();
    fetchData(calendarApi);

    let param = {
        pageModel: {
            pageNow: 1,
            pageSize: 99999,
            query: {},
            sort: ['1create_time'],
        }
    }
    pageCookbookList(param).then(res => {
        if (res.code === 200) {
            cookbookOptions.value = res.data.list.dataList;
        }
        showSpinner.value = false;
    }).catch(err => {
    });
});

const fetchData = (calendarApi) => {
    let param = {
        beginDate: dayjs(calendarApi.view.activeStart).format('YYYY-MM-DD'),
        endDate: dayjs(calendarApi.view.activeEnd).format('YYYY-MM-DD')
    }
    findCookbookByRangeDate(param).then(res => {
        console.log(res);
        if (res.code === 200) {
            events.value = res.data;
            console.log(events.value);

            calendarApi.removeAllEvents()
            calendarApi.addEventSource(events.value)
        }
    })
}

const handleViewChange = (val) => {
    console.log('handleViewChange');
    const calendarApi = fullCalendar.value.getApi();
    calendarApi.changeView(val);
    showDate(calendarApi);
}
//
const prevFn = () => {
    const calendarApi = fullCalendar.value.getApi();
    calendarApi.prev();

    showDate(calendarApi);
    fetchData(calendarApi);
}

const nextFn = () => {
    const calendarApi = fullCalendar.value.getApi();
    calendarApi.next();

    showDate(calendarApi);
    fetchData(calendarApi);
}

const toToday = () => {
    const calendarApi = fullCalendar.value.getApi();
    calendarApi.today();
    showDate(calendarApi);
    fetchData(calendarApi);
}

const openModel = () => {
    open1.value = true;
}

const handleChange = (val) => {
    const calendarApi = fullCalendar.value.getApi();
    if (!val || val.length === 0) {
        calendarApi.changeView(selectedView.value);
        fetchData(calendarApi);
        isNotListView.value = true;
        return;
    }
    isNotListView.value = false;
    let filterEvents = events.value.filter(item => {
        return val.includes(item.cookbookId);
    });
    console.log(events.value);
    calendarApi.removeAllEvents();
    calendarApi.addEventSource(filterEvents);
    calendarApi.changeView("list");
}

const filterOption = (input, option) => {
    return option.key.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}
// 添加事件
const handleAddEvent = () => {
    console.log(addEventForm);
    addEvent(addEventForm).then(res => {
        if (res.code === 200) {
            open1.value = false;
            addEventForm.cookbookIdList = [];
            addEventForm.eatType = "1";
            addEventForm.date = null;
            fetchData(fullCalendar.value.getApi());
            message.success('添加成功');
        }
    }).catch(err => {
        message.error('添加失败');
    });
}
// 删除日程
const handleDeleteEvent = (event) => {
    Modal.confirm({
        title: '确定要删除该日程吗？',
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode('div', { style: 'color:#000;' }, `${event.title}`),
        okText: '确定',
        cancelText: '取消',
        onOk() {
            deleteEvent(event.id).then(res => {
                if (res.code === 200) {
                    fetchData(fullCalendar.value.getApi());
                    message.success('删除成功');
                }
            }).catch(err => {
                message.error('删除失败');
            });
        },
        onCancel() {
        },
    });
}
// 展示编辑弹框
const showEditEvent = (event) => {
    console.log(event);
    editEventForm.id = event.id;
    editEventForm.cookbookId = event.extendedProps.cookbookId;
    editEventForm.eatType = event.extendedProps.eatType;
    editEventForm.datetimeRef = dayjs(event.start);
    open2.value = true;
    console.log(editEventForm);
}
// 编辑日程
const handleEditEvent = () => {
    editEvent(editEventForm).then(res => {
        if (res.code === 200) {
            open2.value = false;
            fetchData(fullCalendar.value.getApi());
            message.success('编辑成功');
        }
    }).catch(err => {
        message.error('编辑失败');
    });
}

const handleCancel = () => {
    console.log(123);
    open1.value = false;
    open2.value = false;
    addEventForm.datetime = null;
    editEventForm.datetime = null;
    console.log(editEventForm);
}
// 搜索日程
const searchCalendar = () => {
    const calendarApi = fullCalendar.value.getApi();
    calendarApi.gotoDate(searchDate.value);
    fetchData(calendarApi);
}

// 在 watch 语言切换时动态调整
const modelTitleWidth = computed(() => {
    console.log(globalI18n.locale.value, 'globalI18n.locale.value')
    return globalI18n.locale.value === 'en-US' || globalI18n.locale.value === 'en' ? '70px' : '35px';
})

</script>
<style lang="scss">
/* 自定义按钮样式 */
.fc-myCustomButton-button {
    background-color: green !important;
    color: white !important;
    border: none !important;
}

.custom-dropdown {
    &:hover {
        .date-desc {
            color: #297929 !important;
        }
    }

    .icon-desc {
        .date-desc {
            color: #4ab44a;
        }
    }

    :where(.css-dev-only-do-not-override-1p3hq3p).ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
        border: 1px solid #4ab44a;
        color: #4ab44a;

        &:hover {
            border-color: #297929 !important;
        }
    }


}

.main-container {
    .fc-direction-ltr .fc-list-table .fc-list-event-graphic {
        display: none;
    }

    .search-box {
        margin: 20px 0 0 20px;
    }

    .fc .fc-list-day-cushion,
    .fc .fc-list-table td {
        cursor: pointer;
    }
}

.toolbar-boxer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 20px 0px 20px;


    .toolbar-middle {
        .left-right-date-btn {
            // background-color: green !important;
            border: 1px solid #4ab44a;
            padding: 9px !important;
            border-radius: 20% !important;
            color: #4ab44a !important;
            cursor: pointer;
            height: 31.99px;
        }

        .left-right-date-btn:hover {
            color: #297929 !important;
            border-color: #297929;
        }
    }

    .toolbar-right {
        button {
            background-color: transparent;
        }

        :where(.css-dev-only-do-not-override-1p3hq3p).ant-btn-primary.ant-btn-background-ghost {
            color: #4ab44a;
        }

        :where(.css-dev-only-do-not-override-1p3hq3p).ant-btn-primary {
            background-color: transparent !important;
            border-color: #4ab44a !important;

            &:hover {
                border-color: #297929 !important;
                background-color: transparent !important;
                color: #297929 !important;
            }
        }
    }
}

.fc-col-header-cell-cushion {
    color: green;
}

.fc-col-header-cell-cushion:hover {
    color: #4ab44a;
}

.fc-daygrid-day-number {
    color: green;
}

.fc-daygrid-day-number:hover {
    color: #4ab44a;
}

.fc .fc-highlight {
    background-color: rgba(180, 211, 176, 0.3);
}

.icon-img {
    width: 24px;
    height: 24px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    // 若 SVG 有描边，可统一描边粗细
    stroke-width: 1;
}


.icon-desc {
    display: flex;
    align-items: center;
}

:where(.css-dev-only-do-not-override-1p3hq3p) a {
    color: #4ab44a;

    &:hover {
        color: #297929;
    }
}

.fc-daygrid-event-dot {
    border-color: #4ab44a;
}

.modelContainer {
    .modelItem {
        display: flex;
        align-items: center;
        margin: 15px 0;

        .modelTitle {
            margin-right: 10px;
            width: var(--modelTitleWidth);
        }

        .modelContent {
            width: 270px;
        }
    }
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-btn-primary {
    background-color: #4ab44a !important;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-btn-primary:hover {
    background-color: #297929 !important;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
    background-color: #4ab44a;
    border-color: #4ab44a;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown .ant-picker-time-panel-column>li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
    background-color: #d0e7d0;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
    border: 1px solid #4ab44a;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-focused,
:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker:hover,
:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-focused {
    border-color: #4ab44a;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled),
:where(.css-dev-only-do-not-override-1p3hq3p).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
    color: #4ab44a;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child,
:where(.css-dev-only-do-not-override-1p3hq3p).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    border-color: #4ab44a;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-radio-button-wrapper:hover {
    color: #4ab44a;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    border-color: #4ab44a !important;
}

// 单选框之间的竖线颜色
:where(.css-dev-only-do-not-override-1p3hq3p).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
    background-color: #4ab44a;
}

:where(.css-dev-only-do-not-override-1p3hq3p).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
    border-color: #4ab44a;
}

// 选中的单选框之间的竖线颜色 - 鼠标移入后
:where(.css-dev-only-do-not-override-1p3hq3p).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before {
    background-color: #4ab44a;
}

span:where(.anticon-check) svg {
    fill: #4ab44a;
}

.icon-popover {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;

    .icon-btn {
        cursor: pointer;

        &:hover {
            color: #4ab44a;
        }
    }
}

.icon-popover>.icon-btn:first-child {
    margin-right: 10px;
}
</style>